<script setup lang="ts">
import {get, put, del} from "@/axios"
import {onMounted, reactive, ref} from "vue"
import {User} from "@element-plus/icons-vue";
import {verifyUserAuthority} from "@/utils/VerifyUserAuthority.ts";
import {ElMessage} from "element-plus";

const page = ref(1)
const size = ref(10)
const userList = ref([])
const pageInfo = reactive({
  total: 0,
  pageTotal: 0,
})

const reloadUserList = (pageNum?: number) => {
  get(`/User/GetRecoveryUserList?page=${page.value}&size=${size.value}`).then((res: any) => {
    if (res.status == 200) {
      pageInfo.total = res.data.totalCount
      pageInfo.pageTotal = res.data.totalPages
      userList.value =  res.data.items
    }
  })
}



const recoveryUserFunc = (row: any) => {
  verifyUserAuthority().then((res: any) => {
    if (res) {
      put(`/User/RecoveryUser?id=${row.id}`).then((res: any) => {
        if (res.status == 200) {
          reloadUserList()
        }
      })
    } else {
      ElMessage.error("身份认证失败！")
    }
  })
}

onMounted(() => {
  reloadUserList()
})

const indexMethod = (num:number) => {
  return num+=1;
}

</script>

<template>
  <div class="user-list-container">
    <div class="user-table">
      <div class="title">
        <span>用户回收站</span>
      </div>
      <el-table
          :data="userList"
          style="width: 100%">
        <el-table-column label="序号" width="60" type="index" :index="indexMethod"/>
        <el-table-column label="用户名" width="200">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon>
                <user/>
              </el-icon>
              <span style="margin-left: 10px">{{ scope.row.username }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="180"/>
        <el-table-column prop="email" label="邮箱" width="180"/>
        <el-table-column prop="createDate" label="创建时间" width="180"/>
        <el-table-column prop="deleteDate" label="删除时间" width="180"/>
        <el-table-column width="240">
          <template #default="scope">
            <el-button type="danger" @click="recoveryUserFunc(scope.row)">恢复</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-model:page-size="size"
          background
          hide-on-single-page
          ayout="prev, pager, next"
          :total="pageInfo.total"
          :page-count="pageInfo.pageTotal"
          v-model:current-page="page"
          @current-change="reloadUserList"
      />
    </div>
  </div>

</template>

<style scoped>
.user-list-container {
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: center;
}

.user-table {
  width: 1500px;
  background-color: white;
  font-size: 18px;
}

.title {
  font-size: 20px;
  color: #283443;
  margin: 10px 5px;
  display: flex;
  justify-content: space-between;
}

.custom-context-menu {
  position: absolute;
  padding: 15px 15px;
  background-color: #f8f8f8;
}

.selected-posts {
  display: flex;
  justify-content: space-between;
}

.select-item {
  margin-left: 10px;
}

.submit-posts {
  margin-top: 10px;
  margin-left: 10px;
}
</style>